<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <title>通讯录</title>
  <style type="text/css">
    th, td {
      border: 1px green solid;
      text-align: center;
    }
  </style>
</head>
<body>
<div align="center">
  <a href="group-handler">管理现有组</a>
  &nbsp;
  <jsp:include page="frame.jsp" />
  <form name="contact-operation">
    <label>查询联系人<input type="radio" name="operation" value="query" onclick="choose()" checked="checked"></label>
    &nbsp;
    <label>添加联系人<input type="radio" name="operation" value="add" onclick="choose()"></label>
  </form>
  <form id="contact" action="contact-handler" method="get">
    <input type="hidden" name="operate" value="list-contacts">
    <input type="text" name="contact-name" placeholder="姓名" value="${contact.contactName}">
    性别<select name="sex" title="选择性别">
      <option id="unknown-sex-option" value="-1"<c:if test="${contact.sex==-1}"> selected</c:if>>未知</option>
      <option value="1"<c:if test="${contact.sex==1}"> selected</c:if>>男</option>
      <option value="0"<c:if test="${contact.sex==0}"> selected</c:if>>女</option>
    </select><br>
    <input type="text" name="birthdate" placeholder="yyyy-MM-dd"
    value="<fmt:formatDate value="${contact.birthdate}" pattern="yyyy-MM-dd" />">
    <input type="text" name="telephone" placeholder="电话" value="${contact.telephone}"><br>
    组别<select name="group-id" title="选择组">
      <option id="no-group-id" value="0">无组别</option>
      <c:forEach items="${requestScope.groups}" var="group">
        <option value="${group.groupId}"
        <c:if test="${contact.groupId==group.groupId}">
          selected="true"
        </c:if>>${group.groupName}</option>
      </c:forEach>
    </select>
    <button id="submit-contact" type="button" onclick="submitContactForm(this)">查询</button>
    <script type="text/javascript">
      function submitContactForm(element) {
        var parent = element.parentNode;
        if (parent.children[0].value == "list-contacts") {
          var size = document.getElementById("size").value;
          var node = document.createElement("input");
          node.setAttribute("name", "size");
          node.setAttribute("type", "hidden");
          node.setAttribute("value", size);
          parent.insertBefore(node, element);
        }
        parent.submit();
      }
    </script>
  </form>
  第${requestScope.page.serial}页，共${requestScope.page.total}页，查询到${requestScope.page.recordsCount}条记录&nbsp;
  每页显示
  <select id="size" onchange="window.location='${requestScope.url}'+'&size='+this.value+'&serial=1'" title="选择每页显示的记录数目">
    <c:forEach begin="1" end="5" var="i">
      <option<c:if test="${10*i==requestScope.page.size}"> selected</c:if>>${10*i}</option>
    </c:forEach>
  </select><br>
  <a href="${requestScope.url}&size=${requestScope.page.size}&serial=1">首页</a>&nbsp;
  <a href="${requestScope.url}&size=${requestScope.page.size}&serial=${requestScope.page.total}">尾页</a>&nbsp;
  <c:if test="${requestScope.page.serial>1}">
    <a href="${requestScope.url}&size=${requestScope.page.size}&serial=${requestScope.page.serial-1}">上一页</a>&nbsp;
  </c:if>
  <c:if test="${requestScope.page.serial<requestScope.page.total}">
    <a href="${requestScope.url}&size=${requestScope.page.size}&serial=${requestScope.page.serial+1}">下一页</a>&nbsp;
  </c:if>
  <input type="button" value="跳转" onclick="jump()">至第<input type="text" id="serial" style="width: 45px;" placeholder="">页
  <script type="text/javascript">
    function jump() {
      var serial = document.getElementById("serial");
      window.location = "${requestScope.url}&size=${requestScope.page.size}&serial=" + serial.value;
    }
  </script>
  <table align="center" cellpadding="0" cellspacing="0" width="70%">
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>出生日期</th>
      <th>电话</th>
      <th>组别</th>
      <th colspan="3">
        <form id="remove-contacts-form" action="contact-handler" method="post" style="display: none;">
          <input type="hidden" name="operate" value="remove-contacts">
        </form>
        <button type="button" onclick="selectPreRemovedContacts()">全选</button>
        <script type="text/javascript">
          function selectPreRemovedContacts() {
            var checkboxes = document.getElementsByName("pre-removed-contact-id");
            for (var checkbox of checkboxes) {
              if (checkbox.checked == false) {
                checkbox.checked = true;
              }
            }
          }
        </script>
        <button type="button" onclick="inverseSelectPreRemovedContacts()">反选</button>
        <script type="text/javascript">
          function inverseSelectPreRemovedContacts() {
            var checkboxes = document.getElementsByName("pre-removed-contact-id");
            for (var checkbox of checkboxes) {
              checkbox.checked = !checkbox.checked;
            }
          }
        </script>
        <input type="submit" form="remove-contacts-form" value="删除" onclick="return verify()">
        <script type="text/javascript">
          function verify() {
            var checkboxes = document.getElementsByName("pre-removed-contact-id");
            for (var checkbox of checkboxes) {
              if (checkbox.checked == true) {
                return confirm("确实要删除选定的联系人吗？此操作不可逆");
              }
            }
            return false;
          }
        </script>
      </th>
    </tr>
    <c:forEach items="${requestScope.page.records}" var="contact">
      <tr>
        <td>${contact.contactName}</td>
        <td>
          <c:choose>
            <c:when test="${contact.sex==1}">男</c:when>
            <c:otherwise>女</c:otherwise>
          </c:choose>
        </td>
        <td>${contact.birthdate}</td>
        <td>${contact.telephone}</td>
        <td>
          <c:forEach items="${requestScope.groups}" var="group">
            <c:if test="${group.groupId==contact.groupId}">${group.groupName}</c:if>
          </c:forEach>
        </td>
        <td style="width: 180px">
          <form action="contact-handler" method="post" style="display: inline;">
            <input type="hidden" name="operate" value="edit-contact" readonly="readonly">
            <input type="hidden" name="contact-id" value="${contact.contactId}" readonly="readonly">
            <input type="submit" value="修改">
          </form>
          <form action="contact-handler" method="post" style="display: inline;">
            <input type="hidden" name="operate" value="remove-contact" readonly="readonly">
            <input type="hidden" name="contact-id" value="${contact.contactId}" readonly="readonly">
            <input type="submit" value="删除">
          </form>
          <input type="checkbox" form="remove-contacts-form" name="pre-removed-contact-id" value="${contact.contactId}">
        </td>
      </tr>
    </c:forEach>
  </table>
</div>
</body>
<script type="text/javascript">
  function choose() {
    var operation = document['contact-operation'].operation.value;
    var contactForm = document.getElementById("contact");
    var contactFormElements = contactForm.elements;
    var groupIdElement, groupIdElementChildren, noGroupIdOption;
    for (var contactFormElement of contactFormElements) {
      if (contactFormElement.name == "group-id") {
        groupIdElement = contactFormElement;
        groupIdElementChildren = contactFormElement.children;
        noGroupIdOption = groupIdElementChildren[0];
        break;
      }
    }
    var submitContactFormButton = document.getElementById("submit-contact");
    var unknownSexOption = document.getElementById("unknown-sex-option");
    if (operation === "add") {
      contactForm.setAttribute("method", "post");
      contactForm.operate.value = "add-contact";
      submitContactFormButton.innerText = "添加";
      unknownSexOption.disabled = true;
      unknownSexOption.style.display = "none";
      var sexElement = unknownSexOption.parentNode;
      if (sexElement.value == unknownSexOption.value) {
        sexElement.children[1].selected = true;
      }
      noGroupIdOption.style.display = "none";
      if (groupIdElement.value == noGroupIdOption.value) {
        if (groupIdElementChildren.length > 1) {
          groupIdElementChildren[1].selected = true;
        }
      }
    } else if (operation === "query") {
      contactForm.setAttribute("method", "get");
      contactForm.operate.value = "list-contacts";
      submitContactFormButton.innerText = "查询";
      unknownSexOption.disabled = false;
      unknownSexOption.style.display = "";
      noGroupIdOption.style.display = "";
    }
  }
  window.onload = choose();
</script>
</html>
